import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import { SearchBar } from 'antd-mobile'
import { good_hotsearch, good_search } from '../api/search'
// 导入css
import '../styles/Search.scss'
class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            searchkey: '',
            search: "",
            searchlist: [],
        }
    }
    // 点击返回
    back() {
        this.props.history.goBack();
    }

    // 热门搜索数据
    async componentDidMount() {
        var res = await good_hotsearch()
        this.setState({ list: res.data.list })
    }

    // 按关键字进行搜索数据
    handlesearch(e) {
        good_search({ searchkey: e.target.value }).then((res) => {
            this.setState({ searchlist: res.data.list })
        })
    }
    // 按热门搜索进行搜索
    handlesearchhot(item) {
        var item = item.target.innerText
        good_search({ searchkey: item }).then((res) => {
            this.setState({ searchlist: res.data.list })
            console.log(res.data.list);
        })
    }
    // 去详情页
    todetail(id) {
        this.props.history.push({ pathname: '/detail', state: { id } })
    }

    render() {
        return (
            <div className='search' >
                <NavBar onBack={() => { this.back() }}> <h4>搜索</h4> </NavBar>
                <div className='search-input'><SearchBar placeholder='请输入内容' showCancelButton={() => true}
                    onBlur={(e) => { this.handlesearch(e) }} />
                </div>
                <div className='search-one'>
                    <h3>最近搜索</h3>
                    <span>sk2</span>
                    <span>sk</span>
                </div>
                <div className='search-one'>
                    <h3>热门搜索</h3>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <span key={index} onClick={(item) => { this.handlesearchhot(item) }}>{item}</span>
                            )
                        })
                    }
                </div>
                <div className='search-two' >
                    {
                        this.state.searchlist.map((item, index) => {
                            return (
                                <div className='search-list' key={index} onClick={() => { this.todetail() }}>
                                    <div><img src={item.pic} alt="" /></div>
                                    <div>{item.name}</div>
                                    <div className='price'>价格 <span>￥{item.salesPrice.value}</span></div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Search;